<script lang="tsx">
import router from '@/router'
import { RouteRecordRaw } from 'vue-router'
import { useComp } from '@/hooks'

const to = (path: string) => {
  router.push(path)
}
const CreatedList = ({ list }: { list: RouteRecordRaw[] }) => {
  return <div>
      {list.map(item => item.meta && item.meta.isNav
        ? <div onClick={() => to(item.path)} class={{ 'nav-item': true, 'nav-item-active': router.currentRoute.value.path === item.path }}>
          {item.meta.title}
        </div>
        : null
      )}
    </div>
}
/**
 * 页面导航栏
 * */
export default useComp(() => {
  const list: RouteRecordRaw[] = [...router.options.routes]
  return () => {
    return (<>
      <div class={'nav-left'}>
        <div class={'nav-title'}></div>
        <CreatedList list={list}></CreatedList>
      </div>
    </>)
  }
})
</script>
<style langs=scss>
.nav-left {
  width: 100px;
  height: 100%;
  overflow: auto;
  background-color: #409EFF;

}
.nav-title {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background-color: #409EFF;
}
.custom-menu {
  background-color: #409EFF;
}
.nav-item {
  height: 50px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
}
.nav-item-active {
  background-color: #7b63f4;

}
.nav-item:hover {
  background-color: #7b63f4;
}
</style>
